{include file="public/header" /}
<link rel="stylesheet" href="/static/index/css/page/cart.css">
<body>
<div class="main">
    <div class="build-navbar"
         data-title="购物车"
         data-transparent
         data-color="#fff"
         data-lcolor="#fff"
         data-right="删除,click:clear"
         data-rcolor="#fff"
    ></div>

    <img src="/static/index/images/bg/bg_wytixtop@2x.png" alt="" class="img-top"/>
    <div class="tpl_list"></div>

    <div class="cart-fixed">
        <div class="flex items-center justify-between">
            <div class="left flex items-center justify-start">
                <div class="all-check flex items-center justify-center" lay-click="allCheck">
                    <img src="/static/index/images/not-check.png" alt="" class="icon"/>
                    <span class="text">全选</span>
                </div>
                <div class="total-vss">
                    <span class="text">总计</span>
                    <span class="total front">0.00</span>
                </div>
            </div>
            <div class="sel-btn" lay-click="settle">
                去结算
            </div>
        </div>
    </div>
</div>
{include file="public/menu" select="3" /}
</body>
<script id="template" type="text/html">
    {{#  layui.each(d.data, function(index, item){ }}
    <div class="item m-30 flex justify-between items-center">
        <div class="check" data-id="{{= item.id }}" data-checkbox lay-change="cart">
            <img src="/static/index/images/not-check.png" alt="" class="check-icon"/>
        </div>
        <div class="right flex flex-1 justify-between ">
            <img src="{{= item.specValue ? item.specValue.icon : item.product.icon }}" alt="" class="icon"/>
            <div class="fill flex flex-col flex-1 justify-between">
                <div class="title line-1-clamp">{{= item.product.title }}</div>
                {{# if(item.specValue){ }}
                <div class="spec line-1-clamp">{{= item.spec }}</div>
                {{# } }}
                <div class="price-vss flex items-center justify-between ">
                    <div class="price front">{{= item.specValue? item.specValue.vip_price : item.product.vip_price }}
                    </div>
                    <div class="num-scope flex items-center justify-center">
                        <div data-id="{{= item.id }}" lay-click="minus" class="minus flex items-center">
                            <i class="layui-icon layui-icon-subtraction"></i>
                        </div>
                        <div class="val num">{{= item.num }}</div>
                        <div data-id="{{= item.id }}" lay-click="plus" class="plus flex items-center">
                            <i class="layui-icon layui-icon-addition"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{#  }); }}
</script>
{include file="public/footer"/}
<script>
    layui.use(['methods'], function () {
        var m = layui.methods, a = layui.jquery, ly = layui.layer, checkIds = [],
            fun = {
                api: {
                    getList: '{:url("cart/index")}',
                    edit: '{:url("cart/edit")}',
                    submit: '{:url("cart/submit")}'
                },
                getList: function () {
                    m.getFlowData(fun.api.getList);
                },
                sum: function () {
                    var s = 0;
                    checkIds = [];
                    a('.lay-this').each(function () {
                        var t = a(this).parent(),
                            n = parseInt(t.find('.num').text()),
                            p = parseFloat(t.find('.price').text());
                        s += n * p;
                        checkIds.push(a(this).attr('data-id'))
                    })
                    a('.total').text(s.toFixed(2))
                },
                sync: function (type, id, that) {
                    m.fetchPostThrottle(fun.api.edit, {type: type, id: id}, function (d) {
                        if (d.code === 1) {
                            var next, val;
                            if (type === 1) {
                                next = a(that).prev();
                                val = parseInt(next.text());
                                next.text(val + 1);
                            } else {
                                next = a(that).next();
                                val = parseInt(next.text());
                                next.text(val > 1 ? val - 1 : 1);
                            }
                            fun.sum()
                        }
                    });
                }
            };
        a('.cart-fixed').css('bottom', 'calc(' + a('.tab-bar').height() + 'px + .245rem)')
        fun.getList();
        m.event.change('cart', function (data, that) {
            a('.check-icon').attr('src', '/static/index/images/not-check.png');
            a('.lay-this').find('.check-icon').attr('src', '/static/index/images/check.png')
            if (a('.lay-this').length === a('.check').length) {
                a('.all-check').addClass('all-this').children('.icon').attr('src', '/static/index/images/check.png');
            }else{
                a('.all-check').removeClass('all-this').children('.icon').attr('src', '/static/index/images/not-check.png');
            }
            fun.sum();
        });

        m.event.click(['allCheck', 'minus', 'plus', 'clear', 'settle'], function (data, that) {
            var cls = 'all-this';
            if (that.hasClass(cls)) {
                that.removeClass(cls);
                a('.check').removeClass('lay-this');
                a('.check-icon').attr('src', '/static/index/images/not-check.png');
                that.children('.icon').attr('src', '/static/index/images/not-check.png');
            } else {
                that.addClass(cls);
                a('.check').addClass('lay-this');
                a('.check-icon').attr('src', '/static/index/images/check.png');
                that.children('.icon').attr('src', '/static/index/images/check.png');
            }
            fun.sum();
        }, function (data, that) {
            fun.sync(2, data.id, that);
        }, function (data, that) {
            fun.sync(1, data.id, that);
        }, function (data, that) {
            if (!checkIds.length) {
                ly.msg('请选中要删除的商品');
                return false;
            }
            ly.confirm('确定要删除购物车内已选中的商品吗？', {title: '请确认'}, function (index) {
                m.fetchPostThrottle(fun.api.edit, {type: 3, cart_id: checkIds.join(',')}, function (d) {
                    ly.msg(d.msg);
                    fun.getList();
                })
            });
        }, function () {
            if (!checkIds.length) {
                ly.msg('请选中要结算的商品');
                return false;
            }
            return m.fetchPostThrottle(fun.api.submit, {cart_id: checkIds.join(',')})
        });


    });
</script>
</html>